<template>
  <!-- 4.第四个问答区 表单 -->
  <div class="four">
    <span class="ni">|</span>
    <span>{{ $t('user.verification-code.required111566110571611') }}</span>
    <p class="hao">{{ $t('user.verification-code.required111566110571711') }}</p>
    <a-table :columns="columns" :data-source="data">
      <span slot="min">
        <a-select @change="handleChange" :placeholder="$t('user.verification-code.required1115661102711')"
          style="width: 100px">
          <a-select-option value="1">
            111
          </a-select-option>
          <a-select-option value="2">
            222
          </a-select-option>
        </a-select>
      </span>
      <a-input placeholder="Basic usage" slot="purAndNece" />
      <a-input placeholder="Basic usage" slot="ways" />
      <a-input placeholder="Basic usage" slot="notes" />
    </a-table>
  </div>
</template>
<script>
const columns = [
  {
    title: '序号',
    dataIndex: 'key',
    align: 'center',
  },
  {
    title: '数据字段',
    dataIndex: 'dataKey',
    align: 'center'
  },
  {
    title: '处理目的及必要性',
    dataIndex: 'purAndNece',
    scopedSlots: { customRender: 'purAndNece' },
    align: 'center'
  },
  {
    title: '最小必要类型',
    dataIndex: 'min',
    align: 'center',
    scopedSlots: { customRender: 'min' }
  },
  {
    title: '通过何种途径取得个人同意',
    dataIndex: 'ways',
    scopedSlots: { customRender: 'ways' },
    align: 'center'
  },
  {
    title: '备注',
    dataIndex: 'notes',
    scopedSlots: { customRender: 'notes' },
    align: 'center'
  },
]

const data = [
  {
    key: 1,
    dataKey: '从RPA读取',
    purAndNece: '从RPA读取',
    ways: '你好',
    notes: '',
  },
  {
    key: 2,
    dataKey: '从RPA读取',
    purAndNece: '从RPA读取',
    ways: '你好',
    notes: '',
  },
  {
    key: 3,
    dataKey: '从RPA读取',
    purAndNece: '从RPA读取',
    ways: '你好',
    notes: '',
  },
  {
    key: 4,
    dataKey: '从RPA读取',
    purAndNece: '从RPA读取',
    ways: '你好',
    notes: '',
  },
  {
    key: 5,
    dataKey: '从RPA读取',
    purAndNece: '从RPA读取',
    ways: '你好',
    notes: '',
  },

]

export default {
  data() {
    return {
      value: '',
      data,
      columns,
    }
  },
  methods: {
    handleChange() {
      console.log(`selected ${value}`);
    },
  }
}
</script>
<style lang="less" scoped>
.four {
  margin: 30px 0 50px 10px;
  width: 800px;

  .ni {
    /*矩形备份*/
    margin-right: 5px;
    left: 838px;
    top: 287px;
    width: 6px;
    height: 12px;
    opacity: 1;
    border-radius: 2px;
    background: rgba(0, 80, 247, 1);
  }

  .hao {
    margin: 10px 10px 10px 5px;
  }
}</style>